<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="会员管理" color="#333333" backgroundColor="#FFFFFF" :border="false" statusBar
			@clickLeft="goReturn"></uni-nav-bar>
		<view class="user-info">
			<view class="item-info">
				<view class="item-info-title">团队总人数</view>
				<view class="item-info-num">{{user.people_total}}</view>
			</view>
			<view class="item-info">
				<view class="item-info-title">团队总充值</view>
				<view class="item-info-num">{{user.recharge_total}}</view>
			</view>
			<view class="item-info">
				<view class="item-info-title">今日充值</view>
				<view class="item-info-num">{{user.today_recharge_total}}</view>
			</view>
			<view class="item-info">
				<view class="item-info-title">今日注册</view>
				<view class="item-info-num">{{user.today_register_total}}</view>
			</view>
		</view>
		<view class="page-title">推荐详情</view>
		<view class="user-tabs">
			<view class="user-tab" :class="active==1?'active' : ''" @click="choose(1)">一级</view>
			<view class="user-tab" :class="active==2?'active' : ''" @click="choose(2)">二级</view>
			<view class="user-tab" :class="active==3?'active' : ''" @click="choose(3)">三级</view>
		</view>
		
		<view class="user-list">
			<view class="list-title">
				<view>下级姓名</view>
				<view>会员账号</view>
				<view>团队充值</view>
				<view>注册时间</view>
			</view>
			<view class="list-detail" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="name">{{item.username}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.account}}</view>
					<view class="time">注册时间&nbsp;&nbsp;&nbsp;&nbsp;{{item.register_time}}</view>
				</view>
				<view class="right">
					<view class="num">{{item.recharge_total}}</view>
				</view>
			</view>
			<view class="list-foot" @click="queryMore" v-if="!isBottom">
				加载更多
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1,
				user:{
					people_total:0,
					recharge_total:0,
					today_recharge_total:0,
					today_register_total:0
				},
				list:[],
				page:{
					pageNum:1,
					pageSize:10
				},
				isBottom:false
			}
		},
		methods: {
			//tab切换
			choose(index){
				this.active = index
				this.page.pageNum = 1
				this.list = []
				this.queryData()
			},
			// onReachBottom(){
			// 	console.log('=========botoom')
			// },
			queryMore(){
				this.page.pageNum++
				this.queryData()
			},
			//查询
			queryData(){
				var url = '/v1/get_my_team?type='+this.active+'&page='+this.page.pageNum+'&page_num=' + this.page.pageSize
				this.$http.get(url,res => {
					this.user = res.data
					const  list = res.data.recommend_list
					this.isBottom = this.page.pageNum == list.last_page || list.last_page == 0
					this.list = [...this.list,...list.data]
				})
			},
			// 返回
			goReturn() {
				uni.switchTab({
					url:'../wode'
				});
			}
			
		},
		onLoad() {
			this.queryData()
		}
	}
</script>

<style lang="scss">
	.user-tabs{
		width: 670;
		background-color: #F2F2F2;
		justify-content: space-between;
		display: flex;
		align-items: center;
		height: 100upx;
		padding: 0upx 10upx;
		margin-top: 20upx;
		.user-tab{
			height: 80upx;
			width: 50%;
			line-height: 80upx;
			text-align: center;
		}
		.active{
			background-color: $blue;
			color: $whiteColor;
			border-radius: 20upx;
		}
	}
	.user-info{
		width: 100%;
		height: 300upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		background-color: $blue;
		border-radius: 20upx;
		.item-info{
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100upx;
			.item-info-title{
				height: 40upx;
				color: $whiteColor;
				font-size: 24upx;
				opacity: 0.8;
			}
			.item-info-num{
				height: 60upx;
				color: $whiteColor;
				font-size: 48upx;
			}
		}
	}
	.user-list{
		width: 100%;
		.list-title{
			display: flex;
			justify-content: space-between;
			height: 80upx;
			align-items: flex-end;
			padding-bottom: 20upx;
			border-bottom: 1px solid #f2f2f2;
			color: #999999;
			font-size: 24upx;
		}
		.list-detail{
			height: 120upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			.left{
				display: flex;
				flex-direction: column;
				align-items: left;
				.name{
					font-size: 28upx;
					color: #333333;
				}
				.time{
					font-size: 20upx;
					color: #999999;
				}
			}
			.right{
				.num{
					font-size: 32upx;
					color: $red;
				}
			}
		}
		.list-foot{
			height: 120upx;
			width: 100%;
			line-height: 120upx;
			color: #999999;
			font-size: 24upx;
			text-align: center;
		}
	}
</style>
